<template lang="pug">
q-input(v-model="value" debounce="20" @update:model-value="changeValue" :mask="mask" fill-mask="#" reverse-fill-mask ref="input" name="value")
</template>

<script setup>
import {computed, onMounted, ref} from "vue";

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  digNum: {
    type: Number,
    default: 0
  },
})
const emit = defineEmits(['update:modelValue'])

const input = ref(null)
const changeValue = (val) => {
  console.log(val)
}


const value = computed({
  get: () => {
    return modifyNumber(props.modelValue)
  },
  set: (val) => {
    // 转换为数字
    let num = Number(val)
    emit('update:modelValue', num)
  }
})

const modifyNumber = (num) => {
  // 转换为字符串
  let str = num ? num.toString() : '0'
  // 如果有小数点
  if (str.indexOf('.') > -1) {
    // 判断小数点后的位数是否为dig_num， 不足则补充0
    let arr = str.split('.')
    if (arr[1].length < props.digNum) {
      for (let i = 0; i < props.digNum - arr[1].length; i++) {
        str += '0'
      }
    }
    // 如果小数点后的位数大于dig_num， 则截取dig_num位
    if (arr[1].length > props.digNum) {
      str = arr[0] + '.' + arr[1].slice(0, props.digNum)
    }
    return str
  }
  // 如果没有小数点，且小数位数为0，直接返回
  if (props.digNum === 0) return str
  // 如果没有小数点，且小数位数不为0，补充小数点, 补充个数为 digNum
  str += '.'
  for (let i = 0; i < props.digNum; i++) {
    str += '0'
  }
  return str
}



const mask = computed(() => {
  // mask 为 #.###  小数点后的 # 为 dig_num 个
  if (props.digNum === 0) return `#`
  let mask = `#.`
  for (let i = 0; i < props.digNum; i++) {
    mask += `#`
  }
  return mask
})


onMounted(() => {
  setTimeout(() => {
    let n = value.value.indexOf('.')
    input.value.focus()
    // 获取小数点的位置，设置光标位置
    input.value.getNativeElement().setSelectionRange(0, n)
    // 监听输入框的输入事件， 输入时，如果输入的是小数点，执行以下操作
    input.value.getNativeElement().addEventListener('input', (e) => {
      n = value.value.indexOf('.')
      if (e.data === '.') {
        // 如果光标位置在小数点左侧， 选中小数点右侧的所有字符
        input.value.getNativeElement().setSelectionRange(n + 1, value.value.length)
      }
    })
    // 监听输入框粘贴事件， 粘贴时，如果粘贴的是小数点，执行以下操作
    input.value.getNativeElement().addEventListener('paste', (e) => {
      const pastedText = e.clipboardData.getData('text')
      // 如果是数字, 包含小数点
      if (/^\d+(\.\d+)?$|^\d+\.$/.test(pastedText)) {
        // 转数字
        // 转字符串
        // 设置值
        setTimeout(() => {
          let num = Number(pastedText)
          value.value = modifyNumber(num)
        }, 50)
      } else {
        // 如果不是数字，阻止粘贴
        e.preventDefault()
      }
    })
  }, 20)
})

</script>

<style scoped>

</style>